<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>任务列表</title>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/order/dispatcher/orderHistory.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <script src="../../../js/vue-compents/dispatcher.js"></script>
    <style>
        #app, html,body{
            height: 100%;
            overflow: hidden;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="header-nav task-nav">
        <div class="nav-search-box"><input onkeydown="if(event.keyCode==13){vm.initList();}" v-model="atmCode"  class="nsb-input" type="text" placeholder="请输入查询条件"> </div>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
        <div class="nav-tab-box">
            <div @click="changeTab(0)" class="ntb-item">
               <div :class="{'ntb-selected':isSelected(0)}">未派工</div>
            </div>
            <div @click="changeTab(1)" class="ntb-item">
                <div :class="{'ntb-selected':isSelected(1)}"> 已派工</div>
            </div>
        </div>
    </div>

    <div class="container task-container">

        <div @click="goDetail(item.id)" class="ls-card-box" v-for=" item of list">
            <div class="card-item">
                <div class="t-header-box">
                    <div class="th-bx-left"><img  v-show="item.dateDate||item.limitDate" src="../../../img/common/ic_time@2x.png" alt="">{{item.orderStatus | orderStatusFilter}}</div>
                    <div class="th-bx-right">{{item.beginDate | dataFormat}}</div>
                </div>
            </div>
            <div class="card-item tx-bx-text">
                <span class="font-weight">{{item.atmInsSide}}</span>的机具：
                <span class="font-weight">{{item.atmModelCode}}({{item.atmCode}})</span>
                <span>工程师{{ item.orderStatus | orderStatusFilter }}。(故障描述：{{item.startUnDesc}})</span>

            </div>

            <div class="card-item">
                <user-info-sample :data="switchUserInfo(item.engs)"></user-info-sample>
            </div>

            <div v-if="item.orderStatusTime" class="card-item order-time tx-border">
                {{item.orderStatusTime}}
            </div>
        </div>
        <div v-show="noDataShow"  class="order-his-no-data">
        --暂无--
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [],
            // 0 （未派工）1 （已派工）
            type: 0,
            atmCode: ''
        },
        computed: {
            noDataShow: function () {
               return this.list.length ===0 ;
            }
        },
        methods: {
            initList: function () {
                Resource.get(DISPATCHER_TASK_LIST, {pageNo: 1, pageSize: 1000, dispType: this.type, advancedSearch: this.atmCode}, function (res) {
                    vm.list = res.list;
                })
            },
            changeTab: function (type) {
                this.type = type;
                this.initList();

            },
            isSelected:function (type) {
                return  this.type === type;
            },
            // 跳转新页面
            goDetail: function (id) {
                redirect('pages/order/dispatcher/orderDetail.html?orderId=' + id);
            },

        }

    });

    function switchUserInfo(data) {
        var result = [];
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            result.push({
                name: item.engName,
                icon: item.icon,
                phone: item.engPhone
            })
        }
        return result;
    }

    mui.plusReady(function () {

        vm.initList();
    })


</script>
</body>
</html>